<template>
  <div class="chatPanel">
    <ul>
      <li class="chatContainer">
        <div class="clist">
          <ul>
            <li v-bind:class="{ leftcss: el.type == 0, rightcss: el.type == 1 }" class="item" v-for="el in chatList">
              <div class="chatc">
                <dl class="chatdl">
                  <dt class="chatdlheader"></dt>
                  <dt class="message">{{ el.msg }}</dt>
                </dl>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="inputChat">
        <dl class="cellstyle">
          <dt style="width:80%">
            <van-field v-model="value" :border="false" placeholder="请输入用户名" bind:change="onChange" />
          </dt>
          <dt><van-button @click="bnt" type="default">发送</van-button></dt>
        </dl>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import eventBus from '../../server/eventBus';
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  private myList: any = [];
  private chatList: any = [];
  private value: string = '';
  public disconnect(data: object) {
    console.log('data');
    for (let i = 0; i < this.list.length; i++) {

      if (this.list[i].id === data.id) { this.list.splice(i, 1); }
    }
  }
  public onChange(val: string) {
    console.log('onchange:', val);
  }

  public bnt() {
    console.log('this.value:', this.value);
    if (!this.value) { return; }
    this.chatList.push({
      type: 0,
      msg: this.value,
    });
    // this.value = "";
  }

  public mounted() {
    eventBus.$on('disconnect', this.disconnect);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.chatPanel {
  width: 100%;
  height: 100%;
  .chatContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    min-height: 50px;
    background: #f9f9f9;
    .clist {
      .item {
        margin-bottom: 20px;
        margin-top: 20px;
      }
      .chatc {
        .chatdl {
          margin-top: 10px;
          .chatdlheader {
            height: 50px;
            width: 50px;
            margin: 10px;
            background: green;
            border-radius: 50%;
          }
          .message {
            background: #ccc;
            width: 150px;
            word-break: break-all;
            margin-left: 68px;
            margin-top: -30px;
          }
        }
      }
      .leftcss {
        text-align: left;
      }
      .rightcss {
        text-align: right;
      }
    }
  }
  .inputChat {
    height: 50px;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0px;
    .cellstyle {
      display: flex;
      line-height: 50px;
    }
  }
}
</style>
